<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS_兄弟选择器</title>
  <style>
      ol+div{
          color: blue;
      }
      div~li{
          color: red;
      }
  </style>
</head>
<body>
<!--相邻兄弟选择器：
        作用：选中指定元素后,符合条件的相邻兄弟元素
        语法：
        选择器1+选择器2{
            属性名:属性值;
            属性名:属性值;
            ........
        }
    通用兄弟选择器：
        作用：选中指定元素后,符合条件的所有兄弟元素
        语法：
        选择器1~选择器2{
            属性名:属性值;
            属性名:属性值;
            ........
        }
       注意：两种兄弟选择器都是选中后的元素，但是相邻兄弟选择器只选中符合条件的第一个兄弟元素，通用兄弟选择器选中符合条件的所有兄弟元素。
-->
    <div>
        <ol>
            <div>222222</div>
            <li>自行车</li>
            <li>飞机</li>
            <li>汽车</li>
            <li>轮船</li>
        </ol>
        <div>112333222</div>
        <ul>
            <li>java</li>
            <li>go</li>
            <li>前端</li>
            <li>测试</li>
        </ul>
    </div>
</body>
</html>